<template>
  <div style="height: 100%; background-color: #ffffff;">
    <cheader :title="title" color="#333333"></cheader>
    <div class="button_return">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        size="medium"
        @click="handle"
      >
        返回</el-button
      >
    </div>
    <div class="main_box">
      <div class="main-c">
        <el-form
          :model="userForm"
          ref="userForm"
          label-width="120px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <div class="content">
            <div class="content_left">
              <el-form-item label="" prop="avatarPath">
                <img
                  :src="userForm.avatarPath"
                  alt="头像"
                  v-if="userForm.avatarPath"
                  width="120px"
                  height="120px"
                />
                <img
                  src="../../assets/default-men.png"
                  alt="头像"
                  width="120px"
                  height="120px"
                  v-else-if="!userForm.avatarPath && userForm.gender === 1"
                />
                <img
                  src="../../assets/default-women.png"
                  alt="头像"
                  width="120px"
                  height="120px"
                  v-else-if="!userForm.avatarPath && userForm.gender === 2"
                />

                <el-upload
                  action="#"
                  class="upload-demo"
                  :before-upload="beforeAvatarUpload"
                  :on-change="handleImgChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept="image/gif, image/jpg, image/bmp,image/png"
                >
                  <el-button size="small" icon="el-icon-upload2"
                    >上传图片</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    温馨提示：<br />支持jpg、gif或bmp格式的图片、建议文件小于20M
                  </div>
                </el-upload>
              </el-form-item>
            </div>
            <div class="content_right">
              <div class="item">
                <span class="item_title">账号信息</span>
                <el-row class="item_content">
                  <el-col :span="12">
                    <el-form-item label="登陆账号" prop="userName">
                      <el-input v-model="userForm.userName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"
                    ><el-form-item label="用户昵称">
                      <el-input
                        v-model="userForm.nickName"
                      ></el-input> </el-form-item
                  ></el-col>
                </el-row>
              </div>
              <div class="item">
                <span class="item_title">个人信息</span>
                <el-row class="item_content">
                  <el-col :span="12">
                    <el-form-item label="员工姓名" prop="emplName">
                      <el-input v-model="userForm.emplName"></el-input>
                    </el-form-item>
                    <el-form-item label="员工性别" prop="gender">
                      <el-select
                        v-model="userForm.gender"
                        placeholder="请选择性别"
                        @change="changeGender"
                      >
                        <el-option
                          v-for="item in genderList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation">
                      <el-input v-model="userForm.nation"></el-input>
                    </el-form-item>
                    <el-form-item label="婚姻状况" prop="marriageStatus">
                      <el-select
                        v-model="userForm.marriageStatus"
                        placeholder="请选择婚姻状况"
                        @change="changeMarriageStatus"
                      >
                        <el-option
                          v-for="item in marriageStatusList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="毕业院校" prop="school">
                      <el-input v-model="userForm.school"></el-input>
                    </el-form-item>

                    <el-form-item label="最高学历" prop="education">
                      <el-select
                        v-model="userForm.education"
                        placeholder="请选择最高学历"
                        @change="changeEducation"
                      >
                        <el-option
                          v-for="item in educationList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="籍贯" prop="nativePlace">
                      <el-input v-model="userForm.nativePlace"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"
                    ><el-form-item label="出生年月" prop="birthday">
                      <el-date-picker
                        v-model="userForm.birthday"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @change="changeBirthday"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="政治面貌" prop="politicalStatus">
                      <el-select
                        v-model="userForm.politicalStatus"
                        placeholder="请选择政治面貌"
                        @change="changePoliticalStatus"
                      >
                        <el-option
                          v-for="item in politicalStatusList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select> </el-form-item
                    ><el-form-item label="血型" prop="bloodType">
                      <el-select
                        v-model="userForm.bloodType"
                        placeholder="请选择血型"
                        @change="changeBloodType"
                      >
                        <el-option
                          v-for="item in bloodTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="健康状况">
                      <el-select
                        v-model="userForm.healthStatus"
                        placeholder="请选择健康状态"
                        @change="changeHealthStatus"
                      >
                        <el-option
                          v-for="item in healthStatusList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所学专业">
                      <el-input v-model="userForm.major"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                      <el-input v-model="userForm.idCard"></el-input>
                    </el-form-item>
                    <el-form-item label="参加工作时间" prop="workingTime">
                      <el-date-picker
                        v-model="userForm.workingTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @change="changeWorkingTime"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="item">
                <span class="item_title">公司信息</span>
                <el-row class="item_content">
                  <el-col :span="12">
                    <el-form-item label="工作证号" prop="workNum">
                      <el-input
                        v-model="userForm.workNum"
                        :disabled="type == 2"
                      ></el-input>
                    </el-form-item>

                    <el-form-item label="入厂时间" prop="entryTime">
                      <el-date-picker
                        v-model="userForm.entryTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @change="changeEntryTime"
                        :disabled="type == 2"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="所属部门" prop="deptName">
                      <el-input
                        v-model="userForm.deptName"
                        :disabled="type == 2"
                        @click.native="goChangeDept"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      label="家庭联系电话"
                      prop="homePhone"
                      :rules="[
                        { required: true, message: '家庭联系电话不能为空' },
                      ]"
                    >
                      <el-input v-model="userForm.homePhone"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="现任职务" prop="positionName">
                      <el-input
                        v-if="type == 2"
                        v-model="userForm.positionName"
                        :disabled="type == 2"
                      ></el-input>
                      <el-select
                        v-if="type == 1"
                        ref="positionInput"
                        v-model="userForm.positionId"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="选择职务"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        clearable
                      >
                        <el-option
                          v-for="item in positionOptions"
                          :key="item.id"
                          :label="item.postName"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!-- 
                    <el-form-item label="所属岗位" prop="positionId">
                      <el-input v-model="userForm.positionId"></el-input>
                    </el-form-item> -->

                    <el-form-item label="手机号码" prop="mobile">
                      <el-input v-model="userForm.mobile"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div style="text-align: center;">
            <el-form-item style="padding-bottom: 50px;">
              <el-button type="primary" @click="createUser">提交</el-button>
              <el-button @click="cancel">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <el-dialog
      title="选择部门"
      :visible.sync="deptDialog"
      :close="cancelDeptDialog"
    >
      <!-- <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="filterDeptForm.deptName"
            placeholder="部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="query"
            >查询</el-button
          >
        </el-form-item>
      </el-form> -->

      <el-breadcrumb
        style="padding: 20px;"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          v-for="item in breadcrumbList"
          :key="item.id"
          @click.native="goBreadcrumb(item)"
          ><a>{{ item.name }}</a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <el-table :data="deptList" border>
        <el-table-column label="部门名称">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="nextDept(scope.row)">{{
              scope.row.name
            }}</a>
          </template>
        </el-table-column>
        <el-table-column label="部门级别">
          <template slot-scope="{ row }">
            <p v-if="row.deptLevel == 1">一级</p>
            <p v-if="row.deptLevel == 2">二级</p>
            <p v-if="row.deptLevel == 3">三级</p>
            <p v-if="row.deptLevel == 4">四级</p>
            <p v-if="row.deptLevel == 5">五级</p>
          </template>
        </el-table-column>
        <el-table-column label="选择">
          <template slot-scope="{ row }">
            <!-- <el-button
              v-if="deptType"
              type="text"
              @click="filterChangeDept(row)"
              >确认</el-button
            > -->
            <el-button v-if="!deptType" type="text" @click="changeDept(row)"
              >确认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import cheader from '@/components/header.vue'
import { formatDate } from '@/utils/utils'
import { uploadFile, createUser, connectUser, deptList, positionList } from '@/api/permission'
import { getAvatar } from '@/api'
export default {
  data() {
    return {
      avatarFile: null,
      title: '编辑员工',
      userInfo: {},
      userForm: {
        avatarPath: '',
        emplName: '',
        nickName: '',
        userName: '',
        gender: '',
        birthday: '',
        politicalStatus: '',
        bloodType: '',
        marriageStatus: '',
        healthStatus: '',
        education: '',
        major: '',
        workNum: '',
        nativePlace: '',
        entryTime: '',
        positionId: '',
        positionName: '',
        deptNameId: '',
        deptName: '',
        workingTime: '',
        school: '',
        homePhone: '',
        mobile: '',
        homeAddress: '',
        // telephone: '',
        idCard: '',
      },
      genderList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '男',
        },
        {
          value: 2,
          label: '女',
        },
      ],
      bloodTypeList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: 'A',
        },
        {
          value: 2,
          label: 'B',
        },
        {
          value: 3,
          label: 'O',
        },
        {
          value: 4,
          label: 'AB',
        },
      ],
      educationList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '博士',
        },
        {
          value: 2,
          label: '硕士',
        },
        {
          value: 3,
          label: '本科',
        },
        {
          value: 4,
          label: '专科',
        },
        {
          value: 5,
          label: '高中',
        },
        {
          value: 6,
          label: '初中',
        },
        {
          value: 7,
          label: '小学',
        },
      ],
      typeList: [
        {
          value: 1,
          label: '正式',
        },
        {
          value: 2,
          label: '劳务',
        },
        {
          value: 3,
          label: '实习',
        },
        {
          value: 4,
          label: '委培',
        },
        {
          value: 5,
          label: '其他',
        },
      ],
      healthStatusList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '良好',
        },
        {
          value: 2,
          label: '疾病',
        },
      ],
      marriageStatusList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '已婚',
        },
        {
          value: 2,
          label: '未婚',
        },
      ],
      politicalStatusList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '群众',
        },
        {
          value: 2,
          label: '党员',
        },
        {
          value: 3,
          label: '预备党员',
        },
        {
          value: 4,
          label: '团员',
        },
      ],
      rules: {
        // avatarPath: [
        //   { required: true, message: '头像不能为空', trigger: 'change' },
        // ],
        emplName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
        ],
        userName: [
          {
            pattern: /[0-9a-zA-Z]/,
            message: '请输入数字和字母',
            trigger: 'blur',
          },
          // /[\W]/g,''
          { required: true, message: '用户账号不能为空', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '性别不能为空', trigger: 'change' },
        ],
        birthday: [
          { required: true, message: '出生年月不能为空', trigger: 'change' },
        ],
        nation: [{ required: true, message: '民族不能为空' }],
        politicalStatus: [
          { required: true, message: '政治面貌不能为空', trigger: 'change' },
        ],
        bloodType: [
          { required: true, message: '血型不能为空', trigger: 'change' },
        ],
        marriageStatus: [
          { required: true, message: '婚姻状况不能为空', trigger: 'change' },
        ],
        education: [
          { required: true, message: '学历不能为空', trigger: 'change' },
        ],
        positionId: [
          { required: true, message: '职务不能为空', trigger: 'blur' },
        ],
        workNum: [
          { required: true, message: '工作证号不能为空', trigger: 'blur' },
        ],
        nativePlace: [
          { required: true, message: '籍贯不能为空', trigger: 'blur' },
        ],
        entryTime: [
          { required: true, message: '入厂时间不能为空', trigger: 'change' },
        ],
        // positionId: [
        //   { required: true, message: '所属岗位不能为空', trigger: 'blur' },
        // ],
        // teamId: [
        //   { required: true, message: '所属车间班组不能为空', trigger: 'blur' },
        // ],
        workingTime: [
          {
            required: true,
            message: '参加工作时间不能为空',
            trigger: 'change',
          },
        ],
        school: [
          { required: true, message: '毕业院校不能为空', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入合法手机号码',
            trigger: 'blur',
          },
        ],
        homeAddress: [{ required: true, message: '家庭住址不能为空' }],
        // telephone: [
        //   { required: true, message: '联系电话不能为空', trigger: 'blur' },
        //   {
        //     pattern: /^1[3456789]\d{9}$/,
        //     message: '请输入合法手机号码',
        //     trigger: 'blur',
        //   },
        // ],
        idCard: [{ required: true, message: '身份证号不能为空' }],
      },
      type: null,
      deptDialog: false,
      breadcrumbList: [{ name: '新疆中泰矿冶有限公司', id: '0' }],
      parentId: '0',
      deptLevel: '',
      filterDeptForm: {
        deptName: '',
      },
      deptList: [],
      deptId: '',
      loading:false,
      positionOptions:[],
    }
  },
  created() {
    this.type = this.$route.query.type
    console.log("this.type",this.type)
    let userInfo = decodeURIComponent(this.$route.query.userInfo)

    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }

    this.getUser()
    this.getAvatar()
  },
  components: {
    cheader,
  },
  methods: {
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const res = await positionList({
          pageNo: 1,
          pageSize: 5000,
          postName: query,
        })
        if (res.code == 200) {
          this.loading = false
          this.positionOptions = res.data.list
        }
      } else {
        this.positionOptions = []
      }
    },
    changeDept(row) {
      this.userForm.deptId = row.id
      this.userForm.deptName = row.name
      this.deptDialog = false
    },
    nextDept(row) {
      if (
        this.breadcrumbList[row.deptLevel] &&
        row.id != this.breadcrumbList[row.deptLevel].id
      ) {
        this.breadcrumbList.splice(row.deptLevel, 1, {
          name: row.name,
          id: row.id,
          deptLevel: row.deptLevel,
          parentIdList: row.parentIdList,
        })
        this.breadcrumbList.splice(row.deptLevel + 1)
      } else {
        if (this.breadcrumbList.length < 5) {
          this.breadcrumbList.push({
            name: row.name,
            id: row.id,
            deptLevel: row.deptLevel,
            parentIdList: row.parentIdList,
          })
          this.parentId = row.id
          this.getDeptList()
        }
      }
    },
    async getDeptList() {
      const res = await deptList({
        deptLevel: this.deptLevel,
        isPage: false,
        pageNo: 1,
        pageSize: 5000,
        parentDeptId: this.parentId,
      })

      if (res.code == 200) {
        this.deptList = res.data.list
        this.deptLevel = res.data.list[0].deptLevel
        // console.log('this.deptLevel',res.data[0].deptLevel)
        // this.total = res.data.total
      }
    },
    goBreadcrumb(item) {
      this.parentId = item.id
      this.getDeptList()
      if (item.deptLevel) {
        this.breadcrumbList.splice(item.deptLevel + 1)
      } else {
        this.breadcrumbList.splice(1)
      }
    },
    cancelDeptDialog() {
      this.deptDialog = false
      this.$refs.positionForm.resetFields()
    },
    goChangeDept() {
      if (this.type == 1) {
        this.deptDialog = true
        this.getDeptList()
      }
    },
    async getAvatar() {
      const res = await getAvatar()
      console.log('res:', res)
      if (res) {
        this.userForm.avatarPath = `data:image/jpg;base64,${res}`
      } else {
        this.userForm.avatarPath = ''
      }
    },
    handle() {
      this.$router.go(-1)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handleImgChange(e) {
      // 回显图片
      console.log('e:', e.raw)
      let file = e.raw
      console.log('==', typeof file)
      this.avatarFile = file
      console.log('avatarFile', this.avatarFile)
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        this.userForm.avatarPath = e.target.result
      }
    },
    uploadAvatar() {},
    edit() {
      this.$router.push({
        path: '/user/userDetail/123',
      })
    },
    changeWorkingTime(val) {
      this.userForm.workingTime = val
    },
    changeEntryTime(val) {
      console.log('val', val)
      this.userForm.entryTime = val
    },
    changeEducation(val) {
      this.userForm.education = val
    },
    changeHealthStatus(val) {
      this.userForm.healthStatus = val
    },
    changeMarriageStatus(val) {
      this.userForm.marriageStatus = val
    },
    changeBloodType(val) {
      this.userForm.bloodType = val
    },
    changeGender(val) {
      this.userForm.gender = val
    },
    changePoliticalStatus(val) {
      this.userForm.politicalStatus = val
    },
    changeBirthday(val) {
      this.userForm.birthday = val
    },
    createUser() {
      this.$refs.userForm.validate(async (valid) => {
        if (valid) {
          let filePath
          let fileId
          if (this.avatarFile) {
            // 上传用户头像
            const result = await uploadFile(this.avatarFile)
            filePath = result.data[0].filePath
            fileId = result.data[0].id
            // 文件与用户关联
            if (filePath) {
              const obj = {
                busId: this.userInfo.id,
                fileIdList: [fileId],
              }
              connectUser(obj)
            }
          }

          const res = await createUser({
            // avatarPath: '',
            avatarPath: filePath,
            birthday: this.userForm.birthday,
            bloodType: this.userForm.bloodType,
            education: this.userForm.education,
            emplName: this.userForm.emplName,
            entryTime: this.userForm.entryTime,
            gender: this.userForm.gender,
            healthStatus: this.userForm.healthStatus,
            homeAddress: this.userForm.homeAddress,
            homePhone: this.userForm.homePhone,
            idCard: this.userForm.idCard,
            major: this.userForm.major,
            marriageStatus: this.userForm.marriageStatus,
            mobile: this.userForm.mobile,
            nation: this.userForm.nation,
            nativePlace: this.userForm.nativePlace,
            nickName: this.userForm.nickName,
            openId: this.userForm.openId,
            password: this.userForm.politicalStatus,
            politicalStatus: this.userForm.politicalStatus,
            positionId: this.userForm.positionId,
            remark: this.userForm.remark,
            school: this.userForm.school,
            deptName: this.userForm.deptName,
            deptId: this.userInfo.deptId,
            // telephone: this.userForm.telephone,
            userName: this.userForm.userName,
            workNum: this.userForm.workNum,
            workingTime: this.userForm.workingTime,
          })
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '更新成功',
            })
            this.$router.push('/permission/staff')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$router.go(-1)
    },
    getValueByLabel(value, objArr) {
      return objArr.find((item) => item.value === value).label
    },
    getLabelByValue(label, objArr) {
      return objArr.find((item) => item.label === label).value
    },
    getUser() {
      // this.userForm.avatarPath = this.avatarPath;
      this.userForm.userName = this.userInfo.userName
      this.userForm.nickName = this.userInfo.nickName
      this.userForm.emplName = this.userInfo.emplName
      this.userForm.emplName = this.userInfo.emplName
      this.userForm.gender = this.userInfo.gender
      this.userForm.birthday = formatDate(this.userInfo.birthday, 'yyyy-MM-dd')
      this.userForm.nation = this.userInfo.nation
      this.userForm.politicalStatus = this.userInfo.politicalStatus
      this.userForm.bloodType = this.userInfo.bloodType
      this.userForm.marriageStatus = this.userInfo.marriageStatus
      ;(this.userForm.healthStatus = this.userInfo.healthStatus),
        this.healthStatusList
      ;(this.userForm.education = this.userInfo.education), this.educationList
      this.userForm.major = this.userInfo.major
      this.userForm.positionId = this.userInfo.positionId
      this.userForm.positionName = this.userInfo.positionName
      this.userForm.workNum = this.userInfo.workNum
      this.userForm.nativePlace = this.userInfo.nativePlace
      // formatDate(this.userInfo.entryTime, 'yyyy-MM-dd')
      this.userForm.entryTime = formatDate(
        this.userInfo.entryTime,
        'yyyy-MM-dd'
      )
      // this.userForm.positionName = this.userInfo.positionName;
      this.userForm.deptName = this.userInfo.deptName
      this.userForm.workingTime = formatDate(
        this.userInfo.workingTime,
        'yyyy-MM-dd'
      )
      this.userForm.school = this.userInfo.school
      this.userForm.homePhone = this.userInfo.homePhone
      this.userForm.mobile = this.userInfo.mobile
      this.userForm.homeAddress = this.userInfo.homeAddress
      this.userForm.idCard = this.userInfo.idCard
      // }
      // console.log('userInfo', this.userInfo)
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!')
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // },
    errorHandler() {
      return true
    },
  },
}
</script>

<style>
.avatarPath-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatarPath-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatarPath-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatarPath {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="scss" scoped>
// .main {
//   width: 90%;
//   height: 620px;
//   background: #fff;
//   margin-left: 5%;
//   overflow: scroll;
//   position: relative;
//   .edit {
//     position: absolute;
//     top: 20px;
//     right: 20px;
//     width: 80px;
//     height: 35px;
//     background: rgba(0, 121, 254, 1);
//     text-align: center;
//     color: seashell;
//     line-height: 35px;
//     font-size: 14px;
//     border-radius: 5px;
//     cursor: pointer;
//   }
//   .main-c {
//     margin: 20px auto;
//     width: 45%;
//     height: 100%;
//   }
// }
.button_return {
  padding: 0 50px 0 50px;
  text-align: right;
}

.main_box {
  background: #fff;
  padding-top: 40px;
}
.content {
  display: flex;
  padding: 0 20px;
  justify-content: center;
  .content_left {
    width: 27%;
  }
}
.main-scroll {
  height: 1000px;
  // overflow-y: scroll;
}
.pagination {
  display: flex;
  justify-content: end;
}
.box-card {
  margin-bottom: 20px;
}
.el-input {
  width: 250px;
}
.el-select {
  width: 250px;
}
.item_title {
  font-size: 18px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #269cff;
  line-height: 27px;
}
.item {
  margin-bottom: 20px;
}
.item_content {
  border-top: 1px solid #269cff;
  padding-top: 30px;
}
</style>
